<template>
  <div>
    <div class="mu">
      <ul>
        <li class="mu-one" v-for="(i,index) in list" :key="index" @click="changePage(i)">
          <div class="mu-two">
            <p></p>
          </div>
          <h5>{{i.title}}</h5>
          <span>{{i.duration}}</span>
          <img v-if="select == i.id" src="../assets/img/播放中.png" alt />
          <img v-else src="../assets/img/播放按钮.png" />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "kemu",
  props: ["id", "active"],
  data() {
    return {
      list: []
    };
  },
  computed: {
    select: {
      set(val) {
        this.$emit("update:active", val);
      },
      get() {
        return this.active;
      }
    }
  },
  async mounted() {
    let res = await this.$http.post(`api/index/video_directory`, {
      course_id: this.id
    });
    console.log(res);
    this.list = res.data.list;
    this.select = res.data.current;
  },
  methods: {
    async changePage(i) {
      this.$emit("change", i.id);
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.mu {
  height: 100%;
}
.mu-one {
  height: 43px;
  border-bottom: 1px solid #d2d2d2;
  position: relative;
}
.mu-two {
  width: 15px;
  height: 15px;
  border: 1px solid #334fff;
  border-radius: 50%;
  position: absolute;
  top: 14.5px;
  left: 24.5px;
}
.mu-two p {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #334fff;
  margin: 3px auto;
}
.mu-one h5 {
  font-size: 12px;
  color: #666666;
  font-weight: 400;
  line-height: 43px;
  position: absolute;
  left: 55px;
  width: 220px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /*规定段落中的文本不进行换行 */
}
.mu-one span {
  font-size: 10px;
  color: #666666;
  line-height: 43px;
  position: absolute;
  left: 302.5px;
}
.mu-one img {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 14px;
  left: 345px;
}
</style>